<template>
	<view>
		<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px', backgroundColor: '#E2FDED' }">
			<view class="nav-content" :style="{ height: navBarHeight + 'px' }">
				<text class="nav-title">主理人首页</text>
			</view>
		</view>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="{ use: false }"
			:top="navHeight">
			<view >
				<view class="index">
					<view class="index-wrap">
						<view class="index-section">
							<view class="background-container">
								<image src="/static/images/weitu.webp" class="background-image" mode="scaleToFill" />
								<view class="today-data">
									<view class="title">今日数据</view>
									<view class="turnover">
										<view>
											<view class="item-data">
												<view>总收益</view>
												<view class="primary">¥ {{ totleAmount }}</view>
											</view>
										</view>
									</view>
									<view class="flex">
										<view class="item-data">
											<view>累计课时</view>
											<view>{{ totalHours }}h</view>
										</view>
										<view class="item-data">
											<view>本月收益</view>
											<view>¥ {{ monthlyIncome }}</view>
										</view>
									</view>
								</view>

								<view class="today-data m-t-30">
									<view class="title">拼班数据</view>
									<view class="turnover">
										<view>
											<view class="item-data">
												<view>拼班总次数（次）</view>
												<view class="primary">12,233</view>
											</view>
										</view>
									</view>
									<view class="flex">
										<view class="item-data">
											<view>活动总次数（次）</view>
											<view>987</view>
										</view>
										<view class="item-data">
											<view>体验课体验总次数（次）</view>
											<view>250</view>
										</view>
									</view>
								</view>

								<view class="today-data m-t-30">
									<view class="title">待办事项</view>
									<view class="turnover">
										<view>
											<view class="item-data">
												<view>待审核订单</view>
												<view class="primary">5</view>
											</view>
										</view>
									</view>
									<view class="flex">
										<view class="item-data">
											<view>待课程订单</view>
											<view>987</view>
										</view>
										<view class="item-data">
											<view>待结算订单</view>
											<view>250</view>
										</view>
									</view>
								</view>

								<!-- Section income echarts Data -->
								<view class="e-data m-t-30 p-b-60 p-20">
									<view class="title" style="background: white;">营业额趋势图</view>
									<view class="e-content">
										<view class="legend">
											<view class="legend-item" style="display: flex; justify-content: center; align-items: center;">
												<view class="legend-color" style="background: #50b164;"></view>
												<text>营业额趋势</text>
											</view>
										</view>
										<charts ids="canvasColumn2" width="100%" height="544rpx" :chartData="visitData">
										</charts>
									</view>
								</view>

								<view class="e-data m-t-30 p-b-60 p-20">
									<view class="title" style="background: white;">访问量趋势图</view>
									<view class="e-content">
										<view class="legend">
											<view class="legend-item" style="display: flex; justify-content: center; align-items: center;">
												<view class="legend-color" style="background: #5894CC;"></view>
												<text>访问量趋势</text>
											</view>
										</view>
										<charts ids="canvasColumn3" width="100%" height="544rpx" :chartData="visitData">
										</charts>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		apiIndex
	} from '@/api/store';
	import { mapGetters, mapActions } from 'vuex';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins';

	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				visitData: {},
				pagesData: [],
				loading: true,
				time: '',
				totleAmount: '12,233.00',
				totalHours: '120',
				monthlyIncome: '123,987.00',
				pendingLessons: '3',
				pendingCheckins: '3',
				incomeData: {},
				safeAreaInsets: 0,
				statusBarHeight: 0,
				navBarHeight: 44, // 导航栏高度
				navHeight: 180, // 状态栏+导航栏的总高度
				// totleAmount: '123',
				todayObj: [{
						name: "成交订单",
						val: "0.00",
					},
					{
						name: "新增用户",
						val: "0",
					},
					{
						name: "访客数",
						val: "0",
					},
				],
				orderObj: [{
						name: "待发货订单",
						val: "0.00",
					},
					{
						name: "待审核售后",
						val: "0",
					},
					{
						name: "待审核评价",
						val: "0",
					},
					{
						name: "售罄商品",
						val: "0",
					},
				],
			};
		},
		computed: {
			...mapGetters(['isLogin'])
		},
		methods: {
			async downCallback() {
				if(!this.isLogin) return;
				// await this.getPageInfo();
				this.mescroll.endSuccess(0, false);
			},

			// async getPageInfo() {
			// 	const res = await apiIndex();
			// 	this.totleAmount = res.total_income || '0.00';
			// 	this.totalHours = res.total_hours || '0';
			// 	this.monthlyIncome = res.monthly_income || '0.00';
			// 	this.pendingLessons = res.pending_lessons || '0';
			// 	this.pendingCheckins = res.pending_checkins || '0';

			// 	const income = {
			// 		categories: res.income_trend?.date || [],
			// 		series: res.income_trend?.list || []
			// 	};
			// 	this.incomeData = income;
			// 	this.pagesData = res;
			// },
			async getPageInfo() {
				const res = await apiIndex();
				this.totleAmount = res.today.today_order_amount
				this.todayObj[0].val = res.today.today_order_num;
				this.todayObj[1].val = res.today.today_new_user;
				this.todayObj[2].val = res.today.today_visitor;

				this.orderObj[0].val = res.pending.wait_shipped;
				this.orderObj[1].val = res.pending.wait_audit;
				this.orderObj[2].val = res.pending.wait_process;
				this.orderObj[3].val = res.pending.no_stock_goods;
				const turnover = {
					categories: res.business5.date,
					series: res.business5.list
				};
				const visit = {
					categories: res.visitor5.date,
					series: res.visitor5.list
				};
				this.turnoverData = turnover;
				this.visitData = visit;
				this.pagesData = res;
			},
			showTime() {
				var d = new Date();
				var year = d.getFullYear();
				var month = d.getMonth() + 1;
				var date = d.getDate();

				var hour = Number(d.getHours()) <= 9 ? '0' + Number(d.getHours()) : Number(d.getHours());
				var min = Number(d.getMinutes()) <= 9 ? '0' + Number(d.getMinutes()) : Number(d.getMinutes());
				var sec = Number(d.getSeconds()) <= 9 ? '0' + Number(d.getSeconds()) : Number(d.getSeconds());

				var str = year + '-' + month + '-' + date + '  ' + hour + ':' + min + ':' + sec;
				this.time = str;
			},
			upCallback(page){
				console.log(page)
				this.mescroll.endSuccess(0, false)
			}
		},
		onLoad() {
			// 获取系统信息
			uni.getSystemInfo({
				success: (res) => {
					this.safeAreaInsets = res.statusBarHeight || 0;
					this.statusBarHeight = res.statusBarHeight;
					this.navHeight = this.statusBarHeight + this.navBarHeight;
				}
			});
			// setInterval(this.showTime, 1000);
		}
	};
</script>

<style lang="scss" scoped>
	.custom-nav {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 99;

		.nav-content {
			display: flex;
			align-items: center;
			justify-content: center;

			.nav-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
			}
		}
	}

	.index {
		padding-top: 100rpx;
		&-wrap {
			.index-header {
				color: $-color-white;
				padding: 30rpx 24rpx;
				background-repeat: no-repeat;
				background-size: 100% 100rpx;
				background-color: #e2fded;
			}

			.index-section {
				width: 100%;

				.background-container {
					position: relative;

					.background-image {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						z-index: 0;
						border-bottom-left-radius: 50rpx;
						border-bottom-right-radius: 50rpx;
					}

					.today-data {
						position: relative;
						z-index: 1;
						margin: 0 30rpx;
					}
				}

				.today-data {
					position: relative;
					z-index: 1;
					margin: 0 30rpx;
				}
			}

			.today-data {
				padding: 30rpx 30rpx 40rpx 30rpx;
				border-radius: 14rpx;
				background-color: $-color-white;

				.item-data {
					// width: 220rpx;

					view:first-child {
						color: $-color-muted;
						font-size: 24rpx;
					}

					view:last-child {
						font-size: 44rpx;
						font-weight: 500;
						margin-top: 6rpx;
						height: 50px;
						word-wrap: break-word;
						word-break: break-all;
					}
				}

				.item-data:first-child {
					width: 260rpx !important;
				}
			}

			.e-data {
				.e-content {
					padding: 20rpx 0;
					border-radius: 14rpx;
					background-color: $-color-white;

					.item-data {
						// width: 220rpx;

						view:first-child {
							color: $-color-muted;
							font-size: 24rpx;
						}

						view:last-child {
							font-size: 44rpx;
							font-weight: 500;
							margin-top: 6rpx;
							height: 50px;
							word-wrap: break-word;
							word-break: break-all;
						}
					}

					.item-data:first-child {
						width: 260rpx !important;
					}
				}

				.e-data {
					.e-content {
						padding: 20rpx 0;
						border-radius: 14rpx;
						background-color: $-color-white;
					}
				}

				.title {
					display: flex;
					align-items: center;
					height: 100%;
					font-size: 32rpx;
					font-weight: 500;
					background: white;

					&:before {
						display: block;
						width: 5rpx;
						height: 38rpx;
						background-color: #4cd964;
						margin-right: 10rpx;
						content: '';
					}
				}
			}
		}
	}

	.legend {
		padding: 20rpx 30rpx;

		.legend-item {
			display: flex;
			align-items: center;

			.legend-color {
				width: 16rpx;
				height: 16rpx;
				border-radius: 4rpx;
				margin-right: 8rpx;
			}

			text {
				font-size: 24rpx;
				color: #666;
			}
		}
	}

	.e-content {
		background: white;
		border-radius: 14rpx;
	}
</style>